<template>
    <div>
        <div class="survey-list">
            <div class="sl-item" v-for="data in list" :key="data.menuId">
                <router-link :to="{
                  name: 'DishDetails',
                  params: {
                    id: data.menuId
                  }
                }">
                <img :src="data.menuSrc" alt="">
                <p>{{data.menuName}}</p>
                <span class="el-icon-view"></span>
                <span>{{Nums(data.doh)}}</span>
                <span class="el-icon-star-off"></span>
                <span>{{Nums(data.collection)}}</span>
                </router-link>
            </div>
        </div>
        <el-empty :image-size="200" v-if="list.length === 0"></el-empty>
         <div class="pageControl">
               <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="current_page"
                :page-size="12"
                layout="prev, pager, next"
                :hide-on-single-page="list.length < 15"
                :total="total">
              </el-pagination>
        </div>
    </div>
</template>

<script>
import cookie from '../../../../cookien'
export default {
  data () {
    return {
      list: [],
      current_page: 1,
      total: 1,
      loading: true
    }
  },
  methods: {
    getData () {
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/findCollectionByUserId',
        params: {
          userId: this.$route.params.userId,
          menuType: 0,
          pageNow: this.current_page,
          pageSize: 15
        },
        headers: {
          token: cookie.getToken()
        }
      }).then(data => {
        console.log(data.data)
        if (data.data.code === 200) {
          console.log(data.data.object)
          this.list = data.data.object.list
          this.loading = false
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.current_page = val
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    }
  }
}
</script>

<style lang="less">
.pageControl{
  margin:30px 0;
  text-align: center !important;
}
.survey-list{
    display: grid;
    grid-template-columns: repeat(3,324px);
    place-content: space-around space-between;
    .sl-item{
        img{
            width: 100%;
            height: 182px;
            border-radius: 8px;
            object-fit: cover;
        }
        p{
            color: #333;
            font-size: 15px;height:35px;
            line-height: 35px;
            text-overflow: ellipsis;
            overflow: hidden;white-space: nowrap;
            &:hover {
                cursor: pointer;
                color: #FFB31A;
            }
        }
        span{
            font-size: 14px;
            height:14px;
            line-height: 14px;
            margin:0 4px;
            display: inline-block;
        }
        .el-icon-view{
            transform:translateY(4px)
        }
    }
}
</style>
